<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Dialog 对话框</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	<script src="../static/js/icons-vue.js"></script>
	<link rel="stylesheet" href="../static/css/com.css">
<style type="text/css">
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>
</head>
<body>
<div id="app2" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">Dialog 弹出一个对话框，适合需要定制性更大的场景。</p>
	<p class="desc">需要设置 model-value / v-model 属性，它接收 Boolean，当为 true 时显示 Dialog。 Dialog 分为两个部分：body 和 footer，footer 需要具名为 footer 的 slot。 title 属性用于定义标题，它是可选的，默认值为空。 最后，本例还展示了 before-close 的用法。</p>
	<p class="desc">before-close 只会在用户点击关闭按钮或者对话框的遮罩区域时被调用。 如果你在 footer 具名插槽里添加了用于关闭 Dialog 的按钮，那么可以在按钮的点击回调函数里加入 before-close 的相关逻辑。</p>
	<el-button type="primary" @click="dialogVisible = true">打开一个对话框</el-button>
	<el-dialog v-model="dialogVisible" title="Tips" width="30%" :before-close="handleClose">
		<span>This is a message</span>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogVisible = false">Cancel</el-button>
				<el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
			</span>
		</template>
	</el-dialog>
	
	
	<el-divider content-position="left">自定义内容</el-divider><!-- =============================================================== -->
	<p class="desc">对话框的内容可以是任何东西，甚至是一个表格或表单。 这个例子展示了如何在对话框中使用元素加表格和表单。</p>
	<el-button type="primary" @click="dialogTableVisible = true">打开一个对话框2 - 表格</el-button>&nbsp;&nbsp;
	<el-dialog v-model="dialogTableVisible" title="Shipping address(点击遮罩不能关闭)" :close-on-click-modal="false">
		<el-table :data="gridData">
			<el-table-column property="date" label="Date" width="150"></el-table-column>
			<el-table-column property="name" label="Name" width="200"></el-table-column>
			<el-table-column property="address" label="Address"></el-table-column>
		</el-table>
	</el-dialog>
	
	<el-button type="primary" @click="dialogFormVisible = true">打开一个对话框3 - 表单</el-button>&nbsp;&nbsp;
	<el-dialog v-model="dialogFormVisible" title="Shipping address">
		<el-form :model="form">
			<el-form-item label="Promotion name" :label-width="formLabelWidth">
				<el-input v-model="form.name" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="Zones" :label-width="formLabelWidth">
				<el-select v-model="form.region" placeholder="Please select a zone">
					<el-option label="Zone No.1" value="shanghai"></el-option>
					<el-option label="Zone No.2" value="beijing"></el-option>
				</el-select>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogFormVisible = false">Cancel</el-button>
				<el-button type="primary" @click="dialogFormVisible = false">Confirm</el-button>
			</span>
		</template>
	</el-dialog>
	
	<el-button type="primary" @click="dialogIframeVisible = true">接入一个iframe</el-button>
	<el-dialog v-model="dialogIframeVisible" class="iframe" width="80%" top="1vh" title="接入一个iframe">
		<div class="layui-body" id="iframe_div" style="bottom: 0px; height:800px">
			<iframe src="../base/button.html" id="iframe_body" frameborder="0" width="100%" height="100%"></iframe>
		</div>
	</el-dialog>
	
	<el-divider content-position="left">自定义头部</el-divider><!-- =============================================================== -->
	<p class="desc">header 可用于自定义显示标题的区域。 为了保持可用性，除了使用此插槽外，使用 title 属性，或使用 titleId 插槽属性来指定哪些元素应该读取为对话框标题。</p>
	<el-button @click="visible = true">打开带有自定义标题的对话框</el-button>
	<el-dialog v-model="visible" :show-close="false">
		<template #header="{ close, titleId, titleClass }" style="margin-right: 0px;">
			<div class="my-header">
				<h4 :id="titleId" :class="titleClass" style="margin: 0;line-height: 36px;">This is a custom header! class类名：{{titleClass}}</h4>
				<el-button type="danger" @click="close">
					<el-icon class="el-icon--left"><close></close></el-icon>
					Close
				</el-button>
			</div>
		</template>
		This is dialog content.
	</el-dialog>
	
	<el-divider content-position="left">嵌套的对话框</el-divider><!-- =============================================================== -->
	<p class="desc">如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 append-to-body 属性。</p>
	<p class="desc">通常我们不建议使用嵌套对话框。 如果你需要在页面上呈现多个对话框，你可以简单地打平它们，以便它们彼此之间是平级关系。 将内层 Dialog 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Dialog 和遮罩层级关系的正确。</p>
	<p class="desc">当 modal 的值为 false 时，请一定要确保 append-to-body 属性为 true，由于 Dialog 使用 position: relative 定位，当外层的遮罩层被移除时，Dialog 则会根据当前 DOM 上的祖先节点来定位，因此可能造成定位问题。</p>
	<el-button @click="outerVisible = true">打开外部对话框</el-button>
	<el-dialog v-model="outerVisible" title="Outer Dialog">
		<template #default>
			<el-dialog v-model="innerVisible" width="30%" title="Inner Dialog" append-to-body></el-dialog>
		</template>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="outerVisible = false">Cancel</el-button>
				<el-button type="primary" @click="innerVisible = true">打开内部对话框</el-button>
			</div>
		</template>
	</el-dialog>
	
	<el-divider content-position="left">内容居中</el-divider><!-- =============================================================== -->
	<p class="desc">标题和底部可水平居中</p>
	<p class="desc">将center设置为true即可使标题和底部居中。 center仅影响标题和底部区域。 Dialog 的内容是任意的，在一些情况下，内容并不适合居中布局。 如果需要内容也水平居中，请自行为其添加 CSS 样式。</p>
	<p class="desc">Dialog 的内容是懒渲染的——在被第一次打开之前，传入的默认 slot 不会被立即渲染到 DOM 上。 因此，如果需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行。</p>
	<el-button @click="centerDialogVisible = true">打开对话框</el-button>
	<el-dialog v-model="centerDialogVisible" title="Warning" width="30%" center>
		<span>应该注意的是，内容将不会在中心对齐（默认的）</span>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="centerDialogVisible = false">Cancel</el-button>
				<el-button type="primary" @click="centerDialogVisible = false">Confirm</el-button>
			</span>
		</template>
	</el-dialog>
	
	<el-divider content-position="left">关闭时销毁</el-divider><!-- =============================================================== -->
	<p class="desc">启用此功能时，默认栏位下的内容将使用 v-if 指令销毁。 当出现性能问题时，可以启用此功能。</p>
	<p class="desc">需要注意的是，当这个属性被启用时，Dialog 内并不会有任何的 DOM 节点存在，除了 overlay header（如果有） footer（如果有）</p>
	<el-button @click="centerDialogVisible2 = true">打开对话框</el-button>
	<el-dialog v-model="centerDialogVisible2" title="Notice" width="30%" destroy-on-close center>
		<span>注意:在第一次打开对话框之前，这个节点将不会被渲染</span>
		<div>
			<strong>额外内容(未呈现)</strong>
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="centerDialogVisible2 = false">Cancel</el-button>
				<el-button type="primary" @click="centerDialogVisible2 = false">Confirm</el-button>
			</span>
		</template>
	</el-dialog>
	
	<el-divider content-position="left">可拖拽对话框</el-divider><!-- =============================================================== -->
	<p class="desc">试着拖动一下header部分吧</p>
	<p class="desc">设置draggable属性为true以做到拖拽</p>
	<el-button @click="dialogVisible7 = true">打开对话框</el-button>
	<el-dialog v-model="dialogVisible7" title="Tips" width="560px" draggable :modal="false" :lock-scroll="false" :close-on-click-modal="false">
		<el-table :data="gridData">
			<el-table-column property="date" label="Date" width="150"></el-table-column>
			<el-table-column property="name" label="Name" width="200"></el-table-column>
			<el-table-column property="address" label="Address"></el-table-column>
		</el-table>
	</el-dialog>
	
	<el-divider content-position="left">全屏对话框</el-divider><!-- =============================================================== -->
	<p class="desc">自定义：设置fullscreen为true</p>
	<el-button @click="dialogVisible8 = true">打开对话框</el-button>
	<el-dialog v-model="dialogVisible8" title="Tips" width="30%" fullscreen>
		<span>这是一个全屏对话框</span>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogVisible8 = false">Cancel</el-button>
				<el-button type="primary" @click="dialogVisible8 = false">Confirm</el-button>
			</span>
		</template>
	</el-dialog>
	
</div>
<script>
const Main2 = {
	data() {
		return {
			dialogVisible: false,
			dialogTableVisible: false,
			dialogFormVisible: false,
			dialogIframeVisible: false,
			formLabelWidth: '140px',
			visible: false,
			outerVisible: false,
			innerVisible: false,
			centerDialogVisible: false,
			centerDialogVisible2: false,
			dialogVisible7: false,
			dialogVisible8: false,
			form: {
				name: '',
				region: '',
			},
			gridData: [
				{
					date: '2016-05-02',
					name: 'John Smith',
					address: 'No.1518, Jinshajiang Road, Putuo District',
				},
				{
					date: '2016-05-04',
					name: 'John Smith',
					address: 'No.1518, Jinshajiang Road, Putuo District',
				},
				{
					date: '2016-05-01',
					name: 'John Smith',
					address: 'No.1518, Jinshajiang Road, Putuo District',
				},
				{
					date: '2016-05-03',
					name: 'John Smith',
					address: 'No.1518, Jinshajiang Road, Putuo District',
				}
			]
			
		}
	},
	methods:{
		handleClose(done){
			this.$confirm('确定要关闭这个对话框吗？', '提示：', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				center: true,
			}).then((action)=>{
				done();
			}).catch((action)=>{
				
			})
		},
	}
}
const app = Vue.createApp(Main2);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)};
app.use(ElementPlus);
let vm = app.mount("#app2");
</script>





</body>
</html>